<!--
 * @Author: liaoxing
 * @Date: 2021-08-12 13:42:16
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-30 11:06:46
 * @Description: file content
 * @FilePath: \数据中心\src\views\home\BoardPage\videoBoard.vue
-->

<template>
  <div>
    <a-row style="min-height:1080px">
      <a-col :span="24" class="justCont" style="background-color: #333;padding:0">
        <a-row :gutter="16">
          <a-col :span="6" v-for="(item,index) in dataFile" :key="index">
            <div class="gutter-box">
              <Flvvideo :url="item.path" style="width:390px;height:290px" :id="'video' + index"></Flvvideo>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Flvvideo from '@/components/_Flvvideo/Flvvideo'
export default {
  name: 'TableList',
  components: {
    Flvvideo,
  },
  data() {
    return {
      dataFile: [
        {
          path: 'http://192.168.12.88:8088/rtsp/400E51BB.flv', //PACK 
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/34EDF5F3.flv',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/359C8AA8.flv', // SMt
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/0702EB2D.flv', // TEST
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/0640793E.flv',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/01677AE4.flv',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/05D3F8D3.flv', // DIP
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/417F2EE0.flv',
        }
      ],
      current: 0,
    }
  },
  created() {
    console.log(this.dataFile)
    // let videoBox = document.getElementById('m3u8Video')
    // const m3u8TempUrl = 'http://221.237.179.20:17086/live/cameraid/1000002$114/substream/1.m3u8'
    // let hls = new Hls()
    // hls.loadSource(m3u8TempUrl)
    // hls.attachMedia(videoBox)
    // hls.on(Hls.Events.MANIFEST_PARSED, () => {
    //   videoBox.play()
    // })
  },
}
</script>
<style lang="less" >
.justCont {
  .gutter-box {
    min-height: 220px;
    border: 1px solid rgba(228, 228, 228, 1);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    cursor: pointer;
  }
  .ant-col-6 {
    margin-top: 20px;
  }
}
</style>

